<template>
  <view class="p-2 pb-5 space-y-5">
    <!-- start: divide-x  -->
    <view class="text-xl font-bold">
      divide-x
    </view>

    <view class="flex h-50 divide-x divide-yellow-500:50">
      <view class="flex-1 center">
        view
      </view>
      <view class="flex-1 center">
        view
      </view>
      <view class="flex-1 center">
        view
      </view>
    </view>
    <!-- end: divide-x  -->

    <!-- start  -->
    <view class="text-xl font-bold ">
      divide-y
    </view>

    <view class="divide-y divide-blue">
      <view class="center">
        view
      </view>
      <view class="center">
        view
      </view>
      <view class="center">
        view
      </view>
    </view>
    <!-- end  -->

    <!-- start  -->
    <view class="text-xl font-bold">
      divide-(number)
    </view>

    <view class="divide-y-20 divide-red-500 divide-opacity-50">
      <view class="center">
        view
      </view>
      <view class="center">
        view
      </view>
      <view class="center">
        view
      </view>
    </view>
    <!-- end  -->
  </view>
</template>

